<template>
    <div class="row ant-bg">
        <div class="col-6">
            <el-tabs v-model="activeName" class="col-left">
                <el-tab-pane lazy label="题目" name="question">
                    <QuestionVue v-bind="{ addclick, _include, change, teamid, isAdmin }"></QuestionVue>
                </el-tab-pane>
                <el-tab-pane lazy label="题单" name="questionbank">
                    <QuestionbankVue v-bind="{ addclick, _include, change, teamid, isAdmin }"></QuestionbankVue>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="col-6">
            <el-form class="col-right container-fluid" label-width="0px" :model="formInline">
                <div class="row" :style="{ height: '42px', lineHeight: '42px' }">
                    <div class="col">
                        <strong>已添加题目</strong>
                    </div>
                    <div class="col text-right">
                        <strong>
                            已添加：
                            <span :style="{ color: 'var(--color-cheng)' }">{{ questionid.length }}</span> 题
                        </strong>
                    </div>
                </div>
                <el-form-item :style="{ height: '42px' }">可拖拽题目改变顺序排列</el-form-item>
                <div class="row">
                    <div :style="{ width: '80px', height: '42px', lineHeight: '42px' }">编号</div>
                    <div class="col" :style="{ height: '42px', lineHeight: '42px' }">名称</div>
                    <div :style="{ width: '80px', height: '42px', lineHeight: '42px' }">
                        题型</div>
                    <div :style="{ width: '80px', height: '42px', lineHeight: '42px' }">删除</div>
                </div>
                <hr :style="{ marginTop: '6px', marginBottom: '6px' }" />
                <draggable v-model="question" group="people" @start="drag = true" @end="drag = true" item-key="ID"
                    class="mydata" chosenClass="chosen">
                    <template #item="{ element, index }">
                        <div class="row" :style="{ marginTop: '6px', marginBottom: '6px', cursor: 'all-scroll' }">
                            <div :style="{ width: '80px', height: '42px', lineHeight: '42px' }">{{ element[p.index ?
                p.index : 'ID']
                                }}</div>
                            <div class="col text-truncate" :style="{ height: '42px', lineHeight: '42px' }">{{
                element.name
            }}
                                <span :style="{ fontSize: '12px', color: '#888' }">{{ element.goldremarks }}</span>
                            </div>
                            <div :style="{ width: '80px', height: '42px', lineHeight: '42px' }">
                                {{ element.type }}</div>
                            <div class="text-center" :style="{ width: '80px', height: '42px', lineHeight: '42px' }">
                                <span class="cu" :style="{
                width: '24px',
                height: '24px',
                background: 'var(--color-cheng)',
                borderRadius: '2px',
                display: 'inline-block',
                lineHeight: '24px',
            }" @click="removeclick(index)">
                                    <el-icon color="#fff" size="18px" :style="{
                transform: 'translateY(3px)'
            }">
                                        <semi-select />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                    </template>
                </draggable>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { SemiSelect } from '@element-plus/icons-vue';
import { computed, reactive, ref } from 'vue';
import draggable from "vuedraggable";
import { Iobj } from '../../../api';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import QuestionVue from './question.vue';
import QuestionbankVue from './questionbank.vue';

type E = {
    (e: 'change:questionid', value?: Studycodemodel.Iquestion[]): void
    (event: 'update:questionid', id: Studycodemodel.Iquestion[]): void
}

const p = defineProps<{ removeclick: (i: number) => void, questionid: Studycodemodel.Iquestion[], addclick: Function, _include?: { [key in keyof Studycodemodel.Iquestion]: any }, index?: keyof Studycodemodel.Imatchquestion, change: Function, teamid?: number, isAdmin?: boolean }>()

const activeName = ref('question')

const emit = defineEmits<E>()
const formInline = reactive<Iobj<Studycodemodel.Iquestion>>({
    teamid: [],
    name: "",
    label: "",
    _offset: 0,
    range: "public"
})


const question = computed<Studycodemodel.Iquestion[]>({
    get() {
        return p.questionid
    },
    set(v) {
        p.change(v)
        emit('update:questionid', v)
    }
})

defineExpose({
    questions: p.questionid
})



const drag = ref(false)

</script>

<style scoped>
.ant-bg {
    background-color: var(--color-f5);
    border-radius: 4px;
    padding-left: 36px;
    padding-right: 36px;
    padding-bottom: 24px;
    padding-top: 24px;
}

.col-left {
    height: 924.99px;
    background: #ffffff;
    padding: 24px;
    box-shadow: 0px 0.3px 0.9px rgb(0 0 0 / 10%), 0px 1.6px 3.6px rgb(0 0 0 / 13%);
    border-radius: 4px;
    border: 1px solid #d9d9d9;

}

.col-right {
    height: 924.99px;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
        0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    border-radius: 4px;
    padding: 24px;
    /* margin-left: 6px; */
}

.mydata {
    height: 680px;
    overflow-y: auto;
    overflow-x: hidden;
}

.mydata::-webkit-scrollbar {
    width: 0px;
    height: 1px;
}

.mydata::-webkit-scrollbar-thumb {
    border-radius: 3px;
    box-shadow: inset 0 0 5px rgba(0, 0, 255, 0.3);
    background: #535353;
}

.mydata::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 255, 0.3);
    border-radius: 3px;
    background: #ededed;
}

.input {
    display: inline-block;
    width: 45%;
}

.col-center div {
    width: 90px;
}

.container-fluid .row {
    margin-bottom: 12px;
}

.icon-class-var {
    display: none;
}

.list:hover {
    color: var(--color-cheng);
}

.list:hover .icon-class-var {
    display: inline-block;
}

.row {
    transition: all 0.4s;
}

.mydata .row {
    cursor: all-scroll;
}

.chosen {
    color: var(--color-cheng);
}
</style>

<style>
.mydata .el-checkbox__label {
    display: none;
}

.col-left .el-tabs__header {
    display: block !important;
}

.sortable-chosen {
    background-color: #000 !important;
    color: #fff;
}
</style>